<template>
  <div class="header-container">
    <div class="header-left flex-box">
        <el-icon class="icon" size="20" @click="changeColl">
            <Fold />
        </el-icon>
        <ul class="flex-box">
          <li 
          v-for="(item,index) in selectMenu"
          :class="{selected:route.path === item.path}"
          :key="item.path"
          class="tab flex-box"
          >
          <el-icon size="15" ><component :is="item.icon"></component></el-icon>
          <router-link class="text flex-box" :to="{path:item.path}">{{ item.name }}</router-link>
            <el-icon class="close" size="15" @click="closeTab(item,index)"><Close /></el-icon>
          </li>
        </ul>
    </div>
    <div class="header-right">
        <el-dropdown @command="handleClick">
      <span class="el-dropdown-link flex-box">
        <el-avatar
        :src="userInfo.avatar"
      />
    </span>
    <template #dropdown>
        <el-dropdown-item command="cancel">退出</el-dropdown-item>
    </template>
  </el-dropdown>
    </div>
  </div>
</template>

<script setup>
  import { computed} from 'vue';
  import {useRoute,useRouter,onBeforeRouteUpdate } from 'vue-router'
  import Storage from '../local/index'
  import {useMenuStore} from '../stores/menuStore'
    //pinia状态管理
  const menuStore = useMenuStore() 

  const selectMenu= computed(()=>menuStore.selectMenu)
  //拿到route实例
  const route = useRoute()
  const router = useRouter()
  const userInfo=JSON.parse(Storage.getItem('userInfo'))
  const changeColl=()=>{
    menuStore.collapseMenu()
  }
  const getActive = (path)=>{
    const obj = {
      '/dashboard':'1-1',
      '/auth/admin':'1-2-1',
      '/auth/group':'1-2-2',
      '/vppz/staff':'1-3-1',
      '/vppz/order':'1-3-2'
    }
    return obj[path]
  }
  //更新主菜单选项
  // 在组件setup函数中使用onBeforeRouteUpdate导航守卫
    onBeforeRouteUpdate((to, from) => {
      //获取当前的路由path，执行store里面的更新active和menudate操作
      menuStore.updateMenuActive(getActive(to.meta.path))
      menuStore.updateMenuDate(to.meta.path)
    });

  //点击关闭tag
  const closeTab =(item,index)=>{
    menuStore.closeMenu(item)
    //删除非当前页，在store中删除
    if(route.path !== item.path){
      return
    }
    //获取菜单数据
    const selectMenuDate=selectMenu.value
    //删除的选中项是最后一项
    if(index === selectMenuDate.length){
      //如果tag只有一个元素
      if(!selectMenuDate.length){
        router.push('/')
      }else{
        //往前移动
        router.push({
          path:selectMenuDate[index-1].path
        })

      }
    } else {
      //如果选中项位于中间位置，往后移动
      router.push({
        path:selectMenuDate[index].path
      })
    }
  }

  const handleClick =(command)=>{
    if(command === 'cancel'){
      localStorage.removeItem('ak_token')
      Storage.clearAll()
      localStorage.removeItem('ak_gl')
      router.push('/login')
      // window.location.href = window.location.origin
    }
  }
</script>

<style lang="less" scoped> 
.flex-box{
    display: flex;
            align-items: center;
            height: 100%;
}
    .header-container{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        background-color: #fff;
        padding-right: 25px;
        .header-left{
            height: 100%;
            .icon{
                width: 45px;
                height: 100%;
            }
            .icon:hover{
                background-color: #f5f5f5;
                cursor: pointer;
            }
            .tab{
              padding: 0;
              height: 100%;
              .text{
                margin:0 5px;
              }
              .close{
                visibility: hidden;
              }
              &.selected{
                a{
                  color: #409eff;
                }
                i{
                  color: #409eff;
                }
                background-color: #f5f5f5;
              }
            }
            .tab:hover{
              background-color: #f5f5f5;
              .close{
                visibility: inherit;
                cursor: pointer;
                color: #333;
              }
            }
        }
        .header-right{
            .user-name{
                margin-left: 10px
            }
        }
        a{
          height: 100%;
          color: #333;
          font-size: 15px;
        }
    }
</style>